<template>
<div class="v-flex-layout md-list-panel">
  <div class="is-auto ">
    <div class="search-and-add-warp"> 
      <div class="btn-warp">
        <el-button size="mini" type="primary" icon="el-icon-plus" @click="creatMdArticleOpen = true"></el-button>
      </div>
      <div class="text-warp">
        <el-input
          placeholder="请关键词"
          prefix-icon="el-icon-search"
          size="mini"
          v-model="query">
          <el-button slot="append" icon="el-icon-search" @click="querySearchHandle"></el-button>
        </el-input>
      </div> 
    </div>
  </div>
  <div class="is-auto">
    <div v-show="searchQuery">搜索关键词：{{searchQuery}}</div>
    <div>
      <calc-tags ref="calcTags" @on-tagClick="filterByTag" :fetch-fn="groupMdArticleByTag"></calc-tags> 
    </div>
  </div>
  <div class="is-flex">
    <div class="inner">
      <my-list class="md-article-list"  ref="articleList" :page-size="pageSize" :loader="mdArticleLoader" mode="scroll" :scroll-distance="10"  fit :data="list">
        <template v-slot="scope"> 
          <div :class="{'md-article-item': true, 'active': defineActive(scope.item)}" @click="itemEditClick(scope.item)">
            <my-typography>
              <my-text strong  ellipsis>{{scope.item.title}}</my-text>
              <my-text ellipsis :rows="2">
                {{scope.item.mdContent}}
              </my-text> 
              <my-text ellipsis type="primary">{{scope.item.updateTime}}</my-text>
            </my-typography>
          </div> 
        </template>  
      </my-list>
    </div>
  </div>

  <my-dialog :visible.sync="creatMdArticleOpen" target="body" title="标签添加" width="400px" :footer="false">
    <article-edit class="md-title-edit"  @on-articleConfirm="confirmClickHandle" ref="articleEdit"></article-edit>
  </my-dialog>
</div>
</template>
<style lang="scss" scoped>
@import "~@/style/vars/_theme.scss";
.md-list-panel{
  box-sizing: border-box;
  height: 100%;
  padding: 10px;
  .search-and-add-warp{
    display:flex;
    flex-flow:row nowrap;
    align-items: center;
    margin-bottom: 5px;
    .text-warp{
      flex:1;
      margin-left: 10px;
    }
  }
  .md-article-list{
    /deep/ .my-list__item{
      padding: 0px;
    }
    .md-article-item{
      height: 90px;
      cursor:pointer;
      padding: 0 5px;
      &:hover{
        background: $blue-10;
      }
      &.active{
        background: $blue-8;
        &:hover{
          background: $blue-8;
        }
      }
    }
  }
}
.md-title-edit.article-edit{
  /deep/ .file-upload{
    display: none;
  }
  /deep/ .content-input{
    display: none;
  }
}
</style>
<script>
import mdArticle from '$my/code/mixin/md-article'
import ArticleEdit from '@/components/article/article-edit'
import CalcTags from '@/components/article/calc-tags'
export default {
  mixins: [mdArticle],
  components: {
    ArticleEdit,
    CalcTags
  },
  props: {
    activeItem: {
      type: Object
    }
  },
  data() {
    return {
      list: [],
      total: 0, 
      page: 1,
      pageSize: 20,
      query: '',
      searchQuery: '',
      filterTag: null,
      creatMdArticleOpen: false
    }
  },
  computed: {
  },
  methods: {
    querySearchHandle() {
      this.searchQuery = this.query
      this.mdListReload()
    },
    filterByTag(tag) {
      this.filterTag = tag
      this.mdListReload()
    },
    confirmClickHandle(data) { 
      if (!data.title) {
        this.$message.warning('请填写标题') 
      } else {
        this.addMdArticle({
          data: {
            title: data.title,
            tags: data.tags
          }
        }).then((res) => {
          console.log(res)
          this.creatMdArticleOpen = false
          
          this.searchQuery = ''
          this.mdListReload()
          // this.$refs.articleList.refresh(1)
          
        })
      }
    },
    mdArticleLoader(page, pageSize) {
      this.page = page
      this.pageSize = pageSize
      return this.fetchMdArticle({
        data: {
          page: this.page,
          pageSize: this.pageSize,
          title: this.searchQuery,
          tag: this.filterTag ? this.filterTag.id : '' 
        }
      }).then((res) => { 
        this.list = this.list.concat(res.list)
        this.total = res.total
        if (this.page === 1) {
          console.log('page = 1')
          this.$emit('on-listRefresh', this.list, this.total)
        } 
        return Promise.resolve({
          total: this.total,
          list: [] // this.list
        })
      })
    },
    mdListReload() {
      this.list = []
      this.total = 0
      this.$refs.articleList.refresh(1)
    },
    itemEditClick(item) { 
      this.$emit('on-editClick', item)
    },
    defineActive(item) {
      if (!this.activeItem) {
        return false
      } else {
        return this.activeItem.id === item.id
      }
    },
    updateItem(data) { 
      const targetIndex = this.list.findIndex((item) => {
        return item.id === data.id
      })
      if (targetIndex < 0) return 
      this.list.splice(targetIndex, 1, data) 
      this.$refs.calcTags.getGroupCount()
    }

  },
  created() {},
  mounted() {}
}
</script>